<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<link href="${apliPath}static/css/default.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/metro-solidBlue/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/icon.css" />
<script type="text/javascript"
	src="${apliPath}static/js/jquery-1.10.2.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$
				.get(
						"${apliPath}mentor/queryMentorsByPage?page=1&rows=6&sort=id&order=desc",
						function(data) {
							var localData = data.rows;
							$('#cc').combobox({
								editable : false,
								data : localData,
								valueField : 'id',
								textField : 'mentorName'
							});
						});
	});
	function insertAlbum() {
		$("#insertForm").form("submit", {
			url : "${apliPath}album/insert",
			success : function(data) {
				$.messager.show({
					title : "提示框",
					msg : "添加成功",
				});
			}
		});
		$('#insertForm').form('reset');
		removePicture();
	}
</script>
<style>
tr {
	height: 50px;
}
</style>

<span style="font-size: 40px;margin-left:50px;color:green;">添加专辑</span>
<div id="customerDiv" style="margin-left: 18%">
	<form id="insertForm" method="post" class="easyui-form"
		enctype="multipart/form-data">
		<table>
			<tr>
				<td align="center"><a class="easyui-linkbutton"
					onclick="insertAlbum()" data-options="iconCls:'icon-ok'">submit</a></td>
				<td align="center"><a href="javascript:;"
					class="easyui-linkbutton" id="reset"
					onclick="javascript:$('#insertForm').form('reset');removePicture() "
					data-options="iconCls:'icon-reload'">reset</a></td>
				<td><label> 谁写的: </label></td>
				<td><input id="cc" name="mentor.id" class="easyui-combobox" />
				</td>
			</tr>
			<tr>
				<td align="right"><label> 标题: </label></td>
				<td><input name="title" class="easyui-textbox" /></td>
				<td align="right"><label> 评分: </label></td>
				<td><input name="score" class="easyui-textbox" />
			</tr>
			<tr>
				<td align="right"><label> 发音: </label></td>
				<td><input name="broadcast" class="easyui-textbox" /></td>

				<td align="right"><label> 个数: </label></td>
				<td><input name="setCount" class="easyui-textbox" /></td>
			</tr>
			<tr>
				<td colspan="" style="vertical-align: top;" align="right"><label>
						展示图: </label></td>
				<td rowspan="2" style="vertical-align: top;">
					<div id="div_addPic"
						style="width:65px;float:left;height:20px;margin:8 10 10 20;background-image:url(${apliPath}static/images/addPic_out.png)">
						<input type="file" id="imageFile" name="thumbnailImg"
							style="width:81;filter:alpha(opacity=0);opacity:0;" width="81"
							onchange="change('albumPicture','imageFile')">
					</div>
					<div
						style="width:65px;float:left;height:20px;margin:8 10 10 10;background-image:url(${apliPath}static/images/removePic_out.png)">
						<input style="width:81;filter:alpha(opacity=0);opacity:0;"
							width="81" onclick="removePicture()" type="button">
					</div> <br /> <img id="albumPicture"
					style="height:185;width:220;object-fit:cover;">
				</td>
				<td style="vertical-align: top;" rowspan="2" align="right"><label>
						大纲: </label></td>
				<td><br /> <br /> <textarea name="summary"
						style="width:200px;height:180px;">这里写内容</textarea></td>
			</tr>
			<tr>
		</table>
	</form>
</div>
<script type="text/javascript">
	function change(picId, fileId) {
		var pic = document.getElementById(picId);
		var file = document.getElementById(fileId);
		var reallocalpath = "";
		if (window.FileReader) {// chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
			oFReader = new FileReader();
			oFReader.readAsDataURL(file.files[0]);
			oFReader.onload = function(oFREvent) {
				pic.src = oFREvent.target.result;
			};
		} else if (document.all) {// IE8-
			reallocalpath = file.value;
			file.select();
			window.top.document.body.focus();
			// file.blur(); 执行该方法 会取消选中
			if (document.selection.createRange().text.length != 0
					&& document.selection.createRange().text != "") {
				reallocalpath = document.selection.createRange().text;
			}
			if (window.ie6) {
				pic.src = reallocalpath; // IE6浏览器设置img的src为本地路径可以直接显示图片
			} else { // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏
				// 览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
				pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\""
						+ reallocalpath + "\")";
				pic.src = '';// 设置img的src为base64编码的透明图片，要不会显示红xx
			}
		} else if (file.files) {// firefox6-
			if (file.files.item(0)) {
				url = file.files.item(0).getAsDataURL();
				pic.src = url;
			}
		}
	}
	function removePicture() {
		var file = document.getElementById("imageFile");
		if (file.outerHTML) {
			file.outerHTML = file.outerHTML;
		} else { // FF(包括3.5)
			file.value = "";
		}
		document.getElementById("albumPicture").removeAttribute('src');
		$("#albumPicture").css("filter", "");
	}
</script>